<template>
  <div>
    <!-- <el-form :inline="true" class="demo-form-inline" label-width="100px">
      <el-form-item label="股票代码">
        <el-select
          v-model="formData.stockCode"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="getDetail"
        >
          <el-option
            v-for="item in options"
            :key="item.tsCode"
            :label="`${item.name}-${item.tsCode}`"
            :value="item.tsCode"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择日期">
        <el-select v-model="formData.reportPeriod" placeholder="请选择季度">
          <el-option
            v-for="item in dateArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDetail">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div class="reportStyle" v-if="detail.id">
      <!-- <h3 style="text-align: center;">{{detail.stockName}} - {{detail.reportPeriod}} - 企业体检报告</h3> -->
      <div v-for="el in colList" :key="el.id" class="rowStyle">
        <p class="title">{{el.name}}</p>
        <p class="content">{{detail[el.feild] || el.feild}}</p>
      </div>
    </div>
    <div v-if="detail.id">
      <div style="width: 50%;height: 300px;margin-left: 25%;" ref="leftEchart" id="leftEchart"></div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props:['detail'],
  data(){
    return {
      dateArr:[],
      options: [],
      loading: false,
      formData: {
        stockCode: '',
        reportPeriod: moment('2021-09-30').format('YYYYMMDD')
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      // detail: {},
      colList:[
        {name: '体检项目',feild: '结果'},
        {name: '偿债能力',feild: 'chnl'},// 1
        {name: '营运能力',feild: 'yynl'},// 3
        {name: '盈利能力',feild: 'ylnl'},// 6
        {name: '成长能力',feild: 'cznl'},// 4
        {name: '资产结构',feild: 'zcjg'},// 2
        {name: '现金流量',feild: 'xjll'},// 5
        {name: 'Z-score',feild: 'ZScore'},
        {name: 'F-score',feild: 'FScore'},
        {name: 'Logit 模型',feild: 'logit'},
        {name: 'M-score',feild: 'MScore'},
        {name: '风险信号',feild: 'signol'},
        {name: '综合评分',feild: 'totScore1'},
      ],
      radarList:[
        {name: '偿债能力',feild: 'radarCh'},
        {name: '资产结构',feild: 'radarZcjg'},
        {name: '营运能力',feild: 'radarYy'},
        {name: '成长能力',feild: 'radarCz'},
        {name: '现金流量',feild: 'radarXj'},
        {name: '盈利能力',feild: 'radarYl'},
      ],
      option: {
        title: {text: '企业六维能力雷达图'},
        radar: {
          indicator: []
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            tooltip: {
              trigger: 'item'
            },
            type: 'radar',
            data: [
              {
                name: '',
                value: [],
              },
            ]
          }
        ]
      }
    } 
  },
  mounted(){
    // this.option.radar.indicator = this.radarList.map(el => {
    //   return {name: el.name, max: 10}
    // })
    this.init()
  },
  watch:{
    'detail.id':{
      handler(val){
        if(val) this.init()
      },
      deep: true
    }
  },
  methods:{
    init(){
      // this.$http.get('/pxv-report-app/examinationreport/getReportPeriodDateList').then(res => {
      //   let {data,success} = res || {}
      //   if(success) this.dateArr = data
      // })
      let value = []
      this.option.radar.indicator = this.radarList.map(el => {
        value.push(this.detail[el.feild] ? Number(this.detail[el.feild]).toFixed(2) : '0.00')
        return {name: el.name, max: 10}
      })
      this.option.series[0].data = [{value,name: this.detail.stockName,}]
      setTimeout(() => {
        var chartDom = this.$refs.leftEchart;
        var myChart = this.$echarts.init(chartDom);
        this.option && myChart.setOption(this.option);
      },0)
    },
    getDetail(){
      this.$http.get(`/pxv-report-app/examinationreport/detail`,{params:this.formData}).then(res => {
        let {success,data} = res || {}
        if(success){
          this.detail = data || {}
          let value = []
          this.option.radar.indicator = this.radarList.map(el => {
            value.push(data[el.feild] ? Number(data[el.feild]).toFixed(2) : '0.00')
            return {name: el.name, max: 10}
          })
          this.option.series[0].data = [{value,name: data.stockName,}]
          setTimeout(() => {
            var chartDom = this.$refs.leftEchart;
            var myChart = this.$echarts.init(chartDom);
            this.option && myChart.setOption(this.option);
          },0)
        }
      })
    },
    remoteMethod(keyword) {
      if (keyword !== '') {
        this.loading = true;
        setTimeout(() => {
          let params = {
            current: 1,size: 20,keyword
          }
          this.$http.get(`/pxv-report-app/stockinfo/selectStockInfoLikePage`,{params}).then(res => {
            let {success,data} = res || {}
            this.loading = false;
            if(success){
              let {records} = data || {}
              this.options = records || []
            }
          }).catch(() => {
            this.loading = false;
          })
        }, 200);
      } else {
        this.options = [];
      }
    }
  }
}
</script>
<style scoped>
.reportStyle{
  margin: 10px;
  border-bottom: 1px solid #ccc;
}
.rowStyle{
  display: flex;
  border: 1px solid #ccc;
  border-bottom: 0;
}
.content,.title{
  margin: 0;
  padding: 5px 10px;
}
.content{
  width: calc(100% - 120px);
  box-sizing: border-box;
}
.title{
  width: 120px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}
</style>
